<template>
  <div>
    <IndexAnimatation> </IndexAnimatation>
    <Header background="transparent"></Header>
    <Footer fixed></Footer>
    <!-- 评论 -->
    <div class="common">
      <div class="home">
        {{info.introduction}}
      </div>
    </div>
  </div>
</template>

<script>

import IndexAnimatation from '@/components/IndexAnimatation'
import Header from '@/components/Header'
import Footer from '@/components/Footer'

let i = 0;
let timer = null;

export default {
  name: 'index',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    IndexAnimatation,
    Header,
    Footer
  },
  data(){
    return{
      info:{
        introduction:'',
        introductionTarget:'千里之行始于足下'
      }
    }
  },
  mounted() {
    // 挂载的时候自己调用
    this.typing();
  },
  methods: {
    // 首页实现 文字的打字效果
    typing(){
      if(i <= this.info.introductionTarget.length){
        this.info.introduction = this.info.introductionTarget.slice(0,i++) + '_';
        timer = setTimeout(this.typing, 100);
      }else{
        this.info.introduction = this.info.introductionTarget;
        clearTimeout(timer);
      }
    }
  },
}
</script>
<style scoped lang="less">
.home{
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  // 垂直上下居中
  transform: translateY(-50%);
  font-size: 0.48rem;
  color: #fff;
  font-weight: 500;
}
</style>